<template>
	<view>
		<view class="top-title">
			<view><text @click="lastMonth" class="link">⋘</text></view>
			<view><text class="day">{{year}}年{{month}}月</text></view>
			<view><text @click="nextMonth" class="link">⋙</text></view>
		</view>
		<view class="container" style="border-bottom: 1px solid #cccccc">
			<view v-for="(item,index) in weeks" :key="index">{{ item }}</view>
		</view>
		<view class="container" style="padding: 1vh 1vh 3vh 1vh;">
			<view v-for="(item,index) in data" :key="index">
				<view v-if="compareToNow(item) === 0" style="color:  #2d8cf0; ">{{ item.date }}</view>
				<view v-if="compareToNow(item) === 1">{{ item.date }}</view>
				<view v-if="compareToNow(item) === -1" class="otherDay" @click="todo"> {{ item.date }}
					<!-- 		<view v-if="compareToNow(item) === -1"  class="otherDay">
			
			</view> -->

					<!-- <button ></button> -->
					<!-- <view>{{ item.date }}</view> -->
					<!-- <view class="date-desc">未打卡</view> -->
				</view>
			</view>
		</view>
		<view class="list">
			<!-- <view v-if="sign_start_time==''">未打卡</view> -->

			<view class="btn_time" @click="getSign()" v-if="startShow == false">上班打卡</view>
			<view class="btn_time1" v-if="startShow == true">上班打卡</view>
			<view class="btn_time" @click="getSign1()" v-if="endShow == false">下班打卡</view>
			<view class="btn_time1" v-if="endShow == true">下班打卡</view>
			<!-- 	 <view v-if="">上班打卡：{{sign_start_time|formatDate}}</view>
		 <view v-if="">下班打卡：{{sign_end_time |formatDate}}</view> -->

			<!-- <view v-if="sign_end_time!==''">今日已打卡</view> -->
		</view>
	</view>
</template>

<script>
	// import uniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar/util.js';
	import helper from '@/common/helper.js';
	import api from '@/common/api.js';
	export default {
		data() {
			return {
				start_time: '',
				end_time: '',
				startShow: false,
				endShow: false,
				today: new Date(),
				now: new Date(),
				weeks: ["日", "一", "二", "三", "四", "五", "六"],
				year: "",
				month: "",
				date: "",
				firstDay: "",
				data: [],
				sign_start_time: '',
				sign_end_time: '',
				isWorking: false //初始状态为上班
			};
		},
		filters: {
			formatDate: function(value) {
				var date = new Date();
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}
		},
		mounted() {
			this.getNow();
			this.getInfo()
		},
		methods: {
			async getInfo() {
				let res = await api.getUserInfo()
				this.end_time = res.data.sign_end_time
				this.start_time = res.data.sign_start_time
				if (this.start_time == '') {
					this.startShow = false;
				} else {
					this.startShow = true;
				}
				if (this.end_time == '') {
					this.endShow = false;
				} else {
					this.endShow = true;
				}
			},
			formatDate: function(value) {
				var date = new Date();
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = hours + ":" + minutes;
				return time;
			},
			getNow() {
				this.year = this.now.getFullYear();
				this.month = this.now.getMonth() + 1;
				this.date = this.now.getDate();
				this.now.setDate(1);
				this.firstDay = this.now.getDay();
				this.initData();
			},
			getMonthDay(month) {
				if ([1, 3, 5, 7, 8, 10, 12].includes(month)) {
					return 31
				} else if ([4, 6, 9, 11].includes(month)) {
					return 30
				} else if (month === 2) {
					//  判断当年是否为闰年
					if (
						(this.year % 4 === 0 && this.year % 100 !== 0) ||
						this.year % 400 === 0
					) {
						return 29
					} else {
						return 28
					}
				}
			},
			initData() {
				this.data = [];
				let days = this.getMonthDay(this.month);
				for (let i = 0; i < this.firstDay; i++) {
					this.data.push({
						year: "",
						month: "",
						date: "",
					});
				}
				for (let i = 0; i < days; i++) {
					this.data.push({
						year: this.year,
						month: this.month,
						date: i + 1,
					});
				}
			},
			lastMonth() {
				this.now.setMonth(this.now.getMonth() - 1);
				this.getNow();
			},
			nextMonth() {
				this.now.setMonth(this.now.getMonth() + 1);
				this.getNow();
			},
			compareToNow(item) {
				if (item.year && item.month && item.date) {
					let date1 = new Date();
					date1.setFullYear(item.year)
					date1.setMonth(item.month - 1)
					date1.setDate(item.date)
					date1.setHours(0)
					date1.setMinutes(0)
					date1.setSeconds(0)
					let now = new Date();
					now.setHours(0)
					now.setMinutes(0)
					now.setSeconds(0)

					if (date1.getTime() > now.getTime()) {
						return 1
					} else if (date1.getTime() === now.getTime()) {
						return 0
					} else if (date1.getTime() < now.getTime()) {
						return -1
					}
				}
			},
			// handlework(){
			// 	this.isWorking =!this.isWorking;
			// },
			todo() {
				console.log("未打卡")
			},
			async getSign() {
				this.startShow = true;
				// let starttime = this.formatDate(new Date())
				let starttime = this.formatDate(new Date())
				let data = {
					sign_start_time: starttime,
					sign_end_time: ''
				}
				let res = await api.getSign(data);
				console.log('123', res);
				if (res.code == 1) {
					uni.showToast({
						title: '打卡成功',
						icon: 'success',
						duration: 2000
					})
					this.start_time == starttime
					this.getInfo()
				} else {
					uni.showToast({
						title: '打卡失败',
						icon: 'error',
						duration: 2000
					})
				}
			},
			async getSign1() {
				if (this.start_time === '') {
					uni.showToast({
						title: '上班未打卡',
						icon: 'error',
						duration: 2000
					})
				} else
					this.endShow = true;
				let endtime = this.formatDate(new Date())
				let data = {
					sign_start_time: this.start_time,
					sign_end_time: endtime,
				}
				let res = await api.getSign(data);
				console.log('123', res);
				if (res.code == 1) {
					uni.showToast({
						title: '打卡成功',
						icon: 'success',
						duration: 2000
					})
					this.endShow = true
				} else {
					uni.showToast({
						title: '上班未打卡',
						icon: 'error',
						duration: 2000
					})
				}

			},
		},
	}
</script>

<style scoped lang="less">
	.top-title {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 40px;
		grid-gap: 1rem;
		background-color: #FFFFFF;
		border-bottom: 1px solid #cccccc;
		line-height: 40px;
	}

	.container {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		grid-auto-rows: 40px;
		grid-gap: 1rem;
		background-color: #FFFFFF;
		line-height: 40px;

		view {
			text-align: center;
		}
	}

	.today {
		// background: url("@/static/success.png") no-repeat center center;
		background-size: 95% 95%;
		position: relative;
	}

	.otherDay {
		// background: url("@/static/error.png") no-repeat center center;
		background-size: 95% 95%;
		position: relative;
	}

	.day {
		padding-left: 50rpx;
	}

	.link {
		margin-left: 100rpx;
		font-size: 18px;
		color: #2d8cf0;
	}

	.date-desc {
		display: block;
		position: absolute;
		top: 6.8vw;
		left: 1.5vw;
		font-size: 2.3vw;
		color: orangered;
	}

	.list {
		view {
			margin: 20rpx;
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 30rpx;
			// background-color: black;
			border: 2rpx solid #ccc;
			// background-color: #ccc;
			border-radius: 15rpx;
		}

		.btn_time {
			background-color: #2d8cf0;
			color: #fff;
			text-align: center;
			font-size: 1.1rem;
		}

		.btn_time1 {
			background-color: #ccc;
			color: #fff;
			text-align: center;
			font-size: 1.1rem;
		}
	}
</style>